<template>
  <form-dialop
    :title="$t('user.SetAlias')"
    :visible="visible"
    :loading="loading"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <div style="padding-top: 20px;">
        <el-form ref="form" :model="formData" :rules="formRule" label-width="100px">
          <el-form-item :label="$t('user.Alias')" prop="alias">
            <el-input v-model="formData.alias" @keyup.enter.native="submit" :placeholder="$t('user.newAlias')" />
          </el-form-item>
        </el-form>
        <div :class="language == 'en' ? 'tips tips-en' : 'tips tips-zh'">
          <p>{{$t('user.aliasTips')}}</p>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue';
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AppModule } from '@/store/modules/app'
export default Vue.extend({
  props: {
    submitMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      item: {},
      formData: {
        alias: ""
      },
      formRule: {
        alias: [
          { validator: (rule: any, value: any, callback: any) => {
            (this as any).$tunnyApi.getDesktopUserList({
              cloud_tenant_id: (this as any).item.cloud_tenant_id,
              pretty_name: value
            }).then((res: Array<any>) => {
              if (value.trim() === ''){
                // return callback(new Error((this as any).$t('user.aliasNotNull')));
                return callback();
              }else if (res.findIndex((item: any) => item.pretty_name === value) !== -1) {
                return callback(new Error((this as any).$t('user.aliasRepeated')));
              } else {
                return callback();
              }
            });
          }, trigger: 'blur' },
          { max: 50, message: this.$t('message.nameLengthRule'), trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    init(item: any) {
      (this as any).visible = true;
      (this as any).item = JSON.parse(JSON.stringify(item));
      (this as any).formData.alias = item.pretty_name;
      this.$nextTick(() => {
        (this.$refs['form'] as any).clearValidate();
      })
    },
    submit() {
      (this as any).loading = true;
      (this as any).$refs.form.validate((valid: any) => {
        if (valid) {
          (this as any).submitMethod((this as any).item, (this as any).formData).then(() => {
            (this as any).handleClose();
          }).finally(() => {
            (this as any).loading = false;
          });
        } else {
          (this as any).loading = false;
        }
      });
    },
    handleClose() {
      (this as any).item = {};
      (this as any).formData = {
        alias: "",
      };
      (this as any).visible = false;
      (this as any).loading = false;
    }
  }
})
</script>

<style lang="scss" scoped>
.el-form-item {
  display: flex;

  .el-form-item__label {
    flex-shrink: 0;
  }

  .el-form-item__content {
    flex-grow: 1;
  }
}
.item-en {
  margin-top: -18px;
  width: 100%;
  margin-left: 93px;
}
.item-zh {
  margin-top: -18px;
}
.span-en {
  font-size: 12px;font-family: PingFang;font-weight: 500;color: #BBBBBB;margin-left:6px;margin-top:10px
}
.span-zh {
  font-size: 12px;font-family: PingFang;font-weight: 500;color: #BBBBBB;margin-left:100px;margin-top:10px
}
.tips {
  font-size: 12px;font-family: PingFang;font-weight: 500;color: #BBBBBB;margin-top:10px
}
.tips-zh {
  margin-left: 100px;
}
.tips-en {
  margin-left: 100px;
}
</style>
